<template>
  <div>
    <div v-if="shows == 'list'">
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column
          label="权益类型"
          align="center"
          property="type_name"
        ></el-table-column>

        <el-table-column
          label="权益名称"
          align="center"
          property="name"
        ></el-table-column>
        <el-table-column
          label="权益说明"
          align="center"
          property="authority_explain"
        ></el-table-column>
        <el-table-column label="开关" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.soft"
              style="display: block"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-text="scope.row.soft == 0 ? '关' : '开'"
              @change="switchTag(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1 && scope.row.num < 1">
              已设置
            </span>
            <span v-if="scope.row.status == 1 && scope.row.num >= 1">
              已设置{{ scope.row.num }}条
            </span>
            <span v-if="scope.row.status == 0">暂未设置</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="200"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="set(scope.row)">
              设置规则
            </el-button>

            <el-button
              v-if="scope.row.type == 5"
              size="mini"
              type="text"
              @click="del(scope.row.authority_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <el-button
        size="mini"
        type="text"
        style="margin:10px;"
        @click="
          shows = 'form';
          authorityId = '';
        "
      >
        添加自定义权益
      </el-button>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <privilege-form
      v-if="shows == 'form'"
      :authority-id="authorityId"
      @out="out"
    />
    <rules v-if="shows == 'rules'" :authority-id="authorityId" @out="out" />
  </div>
</template>
<script>
import { AUTHORITYLIST, SOFT, DELAUTHORITY } from "../service";

export default {
  components: {
    privilegeForm: () => import("./form"),
    rules: () => import("./rules")
  },
  data() {
    return {
      listData: [],
      totals: 0,
      pages: 1,
      shows: "list",
      authorityId: ""
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getRowClass({ rowIndex }) {
      if (rowIndex === 0) {
        return "background:#FAFAFA";
      } else {
        return "";
      }
    },
    set(e) {
      if (e.is_update === 1) {
        this.shows = "rules";
      } else {
        this.shows = "form";
      }
      this.authorityId = e.authority_id;
      this.authorityId = e.authority_id;
    },
    async getList() {
      await AUTHORITYLIST({ page: this.pages, pageshow: 10 }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(ele => {
            if (ele.soft === 1) {
              ele.soft = true;
            } else {
              ele.soft = false;
            }
          });
          this.listData = data.list;
        } else {
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    },
    async switchTag(e) {
      await SOFT({ authority_id: e.authority_id, soft: e.soft ? 1 : 0 }).then(
        res => {
          let { code, msg } = res;
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    out() {
      this.shows = "list";
      this.authorityId = "";
      this.getList();
    },
    async del(authorityId) {
      await this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          DELAUTHORITY({
            authority_id: authorityId
          }).then(res => {
            let { code, msg } = res;
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    }
  }
};
</script>
